<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f4f4f9;
        }

        form {
            margin-bottom: 20px;
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        input,
        select,
        button {
            margin-bottom: 10px;
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        button {
            background-color: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #0056b3;
        }

        #result {
            margin-top: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #fff;
        }

        .success {
            color: green;
        }

        .error {
            color: red;
        }
    </style>
</head>

<body>
<h1>会员管理系统</h1>

<!-- 查询所有会员 -->
<form id="findAllForm">
    <h2>查询所有会员</h2>
    <button type="button" onclick="findAllMembers()">查询</button>
    <div id="findAllResult"></div>
</form>

<!-- 根据ID查询会员 -->
<form id="findByIdForm">
    <h2>根据ID查询会员</h2>
    <label for="memberId">会员ID:</label>
    <input type="number" id="memberId" name="memberId">
    <button type="button" onclick="findMemberById()">查询</button>
    <div id="findByIdResult"></div>
</form>

<!-- 保存会员 -->
<form id="saveForm">
    <h2>保存会员</h2>
    <label for="memberName">会员姓名:</label>
    <input type="text" id="memberName" name="memberName">
    <button type="button" onclick="saveMember()">保存</button>
    <div id="saveResult"></div>
</form>

<!-- 更新会员 -->
<form id="updateForm">
    <h2>更新会员</h2>
    <label for="updateMemberId">会员ID:</label>
    <input type="number" id="updateMemberId" name="updateMemberId">
    <label for="updateMemberName">会员姓名:</label>
    <input type="text" id="updateMemberName" name="updateMemberName">
    <button type="button" onclick="updateMember()">更新</button>
    <div id="updateResult"></div>
</form>

<!-- 删除会员 -->
<form id="deleteForm">
    <h2>删除会员</h2>
    <label for="deleteMemberId">会员ID:</label>
    <input type="number" id="deleteMemberId" name="deleteMemberId">
    <button type="button" onclick="deleteMemberById()">删除</button>
    <div id="deleteResult"></div>
</form>

<!-- 根据姓名查询会员 -->
<form id="findByNameForm">
    <h2>根据姓名查询会员</h2>
    <label for="memberNameForSearch">会员姓名:</label>
    <input type="text" id="memberNameForSearch" name="memberNameForSearch">
    <button type="button" onclick="findMemberByName()">查询</button>
    <div id="findByNameResult"></div>
</form>

<!-- 根据ID查询会员价格 -->
<form id="findPriceByIdForm">
    <h2>根据ID查询会员价格</h2>
    <label for="memberIdForPrice">会员ID:</label>
    <input type="number" id="memberIdForPrice" name="memberIdForPrice">
    <button type="button" onclick="findMemberPriceById()">查询</button>
    <div id="findPriceByIdResult"></div>
</form>

<!-- 充值 -->
<form id="rechargeForm">
    <h2>会员充值</h2>
    <label for="rechargeMemberId">会员ID:</label>
    <input type="number" id="rechargeMemberId" name="rechargeMemberId">
    <label for="rechargeAmount">充值金额:</label>
    <input type="number" step="0.01" id="rechargeAmount" name="rechargeAmount">
    <button type="button" onclick="rechargeMember()">充值</button>
    <div id="rechargeResult"></div>
</form>

<script>
    // 处理响应结果
    function handleResponse(response, resultDivId) {
        const resultDiv = document.getElementById(resultDivId);
        resultDiv.innerHTML = '';
        if (response.ok) {
            response.json().then(data => {
                if (data.code === 200) {
                    resultDiv.innerHTML = `<p class="success">操作成功: ${data.message}</p>`;
                    if (data.data) {
                        if (Array.isArray(data.data)) {
                            data.data.forEach(member => {
                                resultDiv.innerHTML += `<p>姓名: ${member.name}, ID: ${member.id}</p>`;
                            });
                        } else {
                            resultDiv.innerHTML += `<p>姓名: ${data.data.name}, ID: ${data.data.id}</p>`;
                        }
                    }
                } else {
                    resultDiv.innerHTML = `<p class="error">操作失败: ${data.message}</p>`;
                }
            });
        } else {
            resultDiv.innerHTML = `<p class="error">请求失败: ${response.status} ${response.statusText}</p>`;
        }
    }

    // 查询所有会员
    function findAllMembers() {
        fetch('/findMemberAll')
            .then(response => handleResponse(response, 'findAllResult'))
            .catch(error => console.error('Error:', error));
    }

    // 根据ID查询会员
    function findMemberById() {
        const memberId = document.getElementById('memberId').value;
        fetch(`/getMemberById/${memberId}`)
            .then(response => handleResponse(response, 'findByIdResult'))
            .catch(error => console.error('Error:', error));
    }

    // 保存会员
    function saveMember() {
        const memberName = document.getElementById('memberName').value;
        const member = { name: memberName };
        fetch('/saveMember', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(member)
        })
            .then(response => handleResponse(response, 'saveResult'))
            .catch(error => console.error('Error:', error));
    }

    // 更新会员
    function updateMember() {
        const memberId = document.getElementById('updateMemberId').value;
        const memberName = document.getElementById('updateMemberName').value;
        const member = { id: memberId, name: memberName };
        fetch('/updateMember', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(member)
        })
            .then(response => handleResponse(response, 'updateResult'))
            .catch(error => console.error('Error:', error));
    }

    // 删除会员
    function deleteMemberById() {
        const memberId = document.getElementById('deleteMemberId').value;
        fetch(`/deleteMemberById/${memberId}`, {
            method: 'DELETE'
        })
            .then(response => handleResponse(response, 'deleteResult'))
            .catch(error => console.error('Error:', error));
    }

    // 根据姓名查询会员
    function findMemberByName() {
        const memberName = document.getElementById('memberNameForSearch').value;
        fetch(`/getMemberByName/${memberName}`)
            .then(response => handleResponse(response, 'findByNameResult'))
            .catch(error => console.error('Error:', error));
    }

    // 根据ID查询会员价格
    function findMemberPriceById() {
        const memberId = document.getElementById('memberIdForPrice').value;
        fetch(`/getMemberPriceById/${memberId}`)
            .then(response => {
                const resultDiv = document.getElementById('findPriceByIdResult');
                if (response.ok) {
                    response.text().then(price => {
                        resultDiv.innerHTML = `<p>会员价格: ${price}</p>`;
                    });
                } else {
                    resultDiv.innerHTML = `<p class="error">请求失败: ${response.status} ${response.statusText}</p>`;
                }
            })
            .catch(error => console.error('Error:', error));
    }

    // 充值
    function rechargeMember() {
        const memberId = document.getElementById('rechargeMemberId').value;
        const rechargeAmount = document.getElementById('rechargeAmount').value;
        fetch(`/recharge/${memberId}/${rechargeAmount}`, {
            method: 'PUT'
        })
            .then(response => handleResponse(response, 'rechargeResult'))
            .catch(error => console.error('Error:', error));
    }
</script>
</body>

</html>